<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="defaultSearch(value)"
      />
      <ul class="dftList" v-show="true">
        <li @click="getText(i.name)" v-for="i in defaultlist" :key="i.id">
          {{ i.name }}
        </li>
      </ul>
    </form>
    <!-- 列表 -->
    <div class="box">
      <div class="cont" v-for="item in songlist" :key="item.id" @click="GO">
        <div class="song">
          <p class="name">{{ item.name }}</p>
          <p class="msg">
            <span class="singer" v-for="s in item.ar" :key="s.id"
              >{{ s.name }}
            </span>
            <span class="album">- {{ item.al.name }}</span>
          </p>
        </div>
        <div class="play">
          <van-icon class="van-icon van-icon-play-circle-o" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defaultSearchAPI, searchAPI } from "../../api/home";
export default {
  data() {
    return {
      value: "",
      defaultlist: [],
      songlist: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    GO() {
      this.$router.push("/");
    },
    async inhere() {
      this.value = this.$route.params.data;
      console.log(this.value);
      const res = await searchAPI(this.value);
      console.log(res.data.result.songs);
      this.songlist = res.data.result.songs;
    },
    async onSearch(data) {
      if (data) {
        this.$router.push(`/search/${data}`);
      }
    },
    async defaultSearch(params) {
      params = this.value;
      console.log(params);
      const result = await defaultSearchAPI(params);
      console.log("搜索", result);
      this.defaultlist = [
        ...result.data.result.albums,
        ...result.data.result.artists,
        ...result.data.result.songs,
      ];
    },
    getText(text) {
      this.value = text;
    },
  },
  created() {
    this.inhere();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.cont {
  border-top: 1px solid #ccc;
  width: 330px;
  height: 42px;
  padding: 15px 0;
  display: flex;
  margin: 0 15px;
}
.song {
  width: 264px;
}
.name {
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 5px;
}
.msg {
  font-weight: 100;
  font-size: 13px;
}
.play {
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*  */
.dftList {
  display: flex;
  flex-direction: column;

  z-index: 99;
  position: absolute;
}
.dftList li {
  width: 290px;
  height: 28px;
  line-height: 28px;
  margin-left: 25px;
  margin-right: 20px;
  padding-left: 20px;
  color: #aaa;
  background-color: #fff;
}
.dftList li:hover {
  background-color: #ffc0cb;
}
</style>
